<template>
  <div class="page-user-detail">
    <ul class="tab-list">
      <li class="tab" @click="changeType(0)" :class="{active: type === 0}">基本信息</li>
      <li class="tab" @click="changeType(1)" :class="{active: type === 1}">商品套餐</li>
      <li class="tab" @click="changeType(2)" :class="{active: type === 2}">用户信息</li>
      <li class="tab" @click="changeType(3)" :class="{active: type === 3}">操作记录</li>
    </ul>
    <swiper class="content-list" :current="type" @change="changeSwiper">
      <swiper-item>
        <scroll-view class="content" scroll-y>
          <div class="module-title">
            <div class="line"></div>
            <span class="title">数据概览</span>
            <div class="line"></div>
            <div class="order-status">{{orderInfo.orderStatusStr}}</div>
          </div>
          <ul class="info-list">
            <li class="info">
              <div class="title">订单ID:</div>
              <div class="value">{{orderInfo.orderId}}</div>
            </li>
            <li class="info">
              <div class="title">可获得积分数:</div>
              <div class="value">{{orderInfo.incomeIntegral}}</div>
            </li>
            <li class="info">
              <div class="title">录单人员:</div>
              <div class="value">{{orderInfo.saleUserName}}</div>
            </li>
            <li class="info">
              <div class="title">订单总额:</div>
              <div class="value">{{orderInfo.orderAmount}}元</div>
            </li>
            <li class="info">
              <div class="title">出单微信号:</div>
              <div class="value">{{orderInfo.ownerWechat}}</div>
            </li>
            <li class="info">
              <div class="title">已付金额:</div>
              <div class="value">{{orderInfo.partOrderAmount}}元</div>
            </li>
            <li class="info">
              <div class="title">下单渠道:</div>
              <div class="value">{{orderInfo.regChannelName}}</div>
            </li>
            <li class="info">
              <div class="title">支付方式:</div>
              <div class="value">{{orderInfo.orderPayList && orderInfo.orderPayList[0].payTypeStr}}</div>
            </li>
            <li class="info" v-if="orderInfo.relOrderId">
              <div class="title">关联订单ID:</div>
              <div class="value">{{orderInfo.relOrderId}}</div>
            </li>
            <li class="info" v-if="orderInfo.relOrderId && orderInfo.contract">
              <div class="title">关联订单已用积分数:</div>
              <div class="value">{{orderInfo.contract}}</div>
            </li>
            <li class="info" v-if="orderInfo.abroadAddress === 1">
              <div class="title">国际件运费:</div>
              <div class="value">{{orderInfo.abroadLogisticsFee/100}}元&nbsp;</div>
            </li>
            <li class="info block" v-if="orderInfo.abroadAddress === 1">
              <div class="title">国际件运费支付方式:</div>
              <div class="value">{{orderInfo.abroadLogisticsFeePayTypeStr}}&nbsp;</div>
            </li>
            <li class="info block">
              <div class="title">下单时间:</div>
              <div class="value">{{orderInfo.ctime}}</div>
            </li>
          </ul>
          <div class="line"></div>
          <ul class="info-list">
            <li class="info block">
              <div class="title main-title"><img style="width: 28rpx; height: 24rpx; "
                                                 src="/static/images/order-detail/remark.png">订单备注:
              </div>
              <div class="value">{{orderInfo.remark || "无"}}</div>
            </li>
          </ul>
          <div class="line"></div>
          <ul class="info-list">
            <li class="info block">
              <div class="title main-title"><img style="width: 24rpx; height: 28rpx;"
                                                 src="/static/images/order-detail/pay.png">付款记录:
              </div>
              <div class="value" v-if="orderInfo.orderPayList" v-for="(orderPay,index) in orderInfo.orderPayList"
                   :key="index">
                {{orderPay.payTime}}, {{orderPay.payTypeStr}}, &yen;{{orderPay.payAmount/100}}
              </div>
            </li>
          </ul>
          <div class="line"></div>
          <ul class="info-list">
            <li class="info block">
              <div class="title main-title"><img style="width: 20rpx;height: 28rpx; "
                                                 src="/static/images/order-detail/address.png">收货地址:
              </div>
              <div class="value">{{orderInfo.abroadAddress == 0 ?
                orderInfo.provinceName+orderInfo.cityName+orderInfo.areaName+orderInfo.streetName+orderInfo.consigneeAddress
                : orderInfo.consigneeAddress}}&nbsp;
              </div>
            </li>
          </ul>
          <div class="line"></div>
          <ul class="info-list">
            <li class="info block">
              <div class="title main-title"><img style="width: 28rpx; height: 22rpx; "
                                                 src="/static/images/order-detail/address.png">物流信息:
              </div>
            </li>
            <li class="info block">
              <div class="title">快递公司:</div>
              <div class="value">{{orderInfo.logisticsName}}&nbsp;</div>
            </li>
            <li class="info block">
              <div class="title">快递单号:</div>
              <div class="value">{{orderInfo.logisticsNo}}&nbsp;</div>
            </li>
          </ul>
          <ul class="logistics-list">
            <li class="logistics" v-for="(logistics,index) in logisticsList" :key="index">
              <img class="point" src="/static/images/order-detail/point.png">
              <div class="point-line"></div>
              <div class="logistics-content">{{logistics.context}}</div>
              <div class="logistics-time">{{logistics.ftime}}</div>
            </li>
          </ul>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="content" scroll-y>
          <template v-if="orderInfo.serviceGoodsId > 0">
            <div class="module-title">
              <div class="line"></div>
              <span class="title">套餐信息</span>
              <div class="line"></div>
            </div>
            <ul class="info-list">
              <li class="info block">
                <div class="title ">套餐ID:</div>
                <div class="value">{{orderInfo.serviceGoodsId}}</div>
              </li>
              <li class="info block">
                <div class="title">套餐名称:</div>
                <div class="value">{{orderInfo.serviceGoodsName}}</div>
              </li>
              <li class="info block">
                <div class="title">套餐价格:</div>
                <div class="value">{{orderInfo.serviceGoodsPrice/100}}</div>
              </li>
            </ul>
            <div class="line"></div>
          </template>
          <div class="module-title">
            <div class="line"></div>
            <span class="title">商品信息</span>
            <div class="line"></div>
          </div>
          <ul class="info-list border" v-for="(data,index) in orderInfo.orderGoodsList" :key="index">
            <li class="info block">
              <div class="title">商品ID:</div>
              <div class="value">{{data.goodsId}}</div>
            </li>
            <li class="info block">
              <div class="title">商品名称:</div>
              <div class="value">{{data.goodsName}}</div>
            </li>
            <li class="info block">
              <div class="title">商品单价:</div>
              <div class="value">{{data.goodsIntegral}}积分</div>
            </li>
            <li class="info block">
              <div class="title">商品数量:</div>
              <div class="value">{{data.goodsNum}}</div>
            </li>
          </ul>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="content" scroll-y>
          <div class="module-title">
            <div class="line"></div>
            <span class="title">用户信息</span>
            <div class="line"></div>
          </div>
          <ul class="info-list">
            <li class="info block">
              <div class="title">用户ID:</div>
              <div class="value">{{userInfo.userId}}</div>
            </li>
            <li class="info">
              <div class="title">用户姓名:</div>
              <div class="value">{{userInfo.realName}}</div>
            </li>
            <li class="info">
              <div class="title">用户性别:</div>
              <div class="value">{{userInfo.sex === 1 ? "男" : "女"}}</div>
            </li>
            <li class="info">
              <div class="title">出生年月:</div>
              <div class="value">{{userInfo.bornYear}}-{{userInfo.bornMonth}}-{{userInfo.bornDate}}</div>
            </li>
            <li class="info">
              <div class="title">手机号:</div>
              <div class="value">{{userInfo.mobile}}</div>
            </li>
            <li class="info">
              <div class="title">身高:</div>
              <div class="value">{{userInfo.height}}CM</div>
            </li>
            <li class="info">
              <div class="title">用户来源:</div>
              <div class="value">{{userInfo.channelName}}</div>
            </li>
            <li class="info">
              <div class="title">是否注册小程序:</div>
              <div class="value">{{userInfo.register ? "是":"否"}}&nbsp;</div>
            </li>
            <li class="info">
              <div class="title">购买次数:</div>
              <div class="value">{{userBuyTimes}}</div>
            </li>
            <li class="info block">
              <div class="title">注册时间:</div>
              <div class="value">{{userInfo.ctime}}</div>
            </li>
          </ul>
          <div class="line"></div>
          <div class="module-title">
            <div class="line"></div>
            <span class="title">老师信息</span>
            <div class="line"></div>
          </div>
          <ul class="info-list border" v-for="(data,index) in orderInfo.orderServicerList" :key="index">
            <li class="info block">
              <div class="title">老师ID:</div>
              <div class="value">{{data.servicerId}}</div>
            </li>
            <li class="info block">
              <div class="title">老师姓名:</div>
              <div class="value">{{data.servicerName}}</div>
            </li>
            <li class="info block">
              <div class="title">老师电话:</div>
              <div class="value">{{data.servicerMobile}}积分</div>
            </li>
          </ul>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="content" scroll-y>
          <ul class="logistics-list">
            <li class="logistics" v-for="(data,index) in orderInfo.orderLogList" :key="index">
              <img class="point" src="/static/images/order-detail/point.png">
              <div class="point-line"></div>
              <div class="logistics-content">{{data.content}}</div>
              <div class="logistics-time">{{data.ctime}}</div>
            </li>
          </ul>
        </scroll-view>
      </swiper-item>
    </swiper>
    <div class="btn-footer" v-if="isFinanceCheck">
      <!--<div class="btn" @click="toEdit">修改</div>-->
      <div class="btn btn-active" @click="toCheck">审核</div>
    </div>
    <div class="result-wrap" v-if="showFinanceCheck">
      <div class="result-body">
        <div class="result-title">订单是否审核通过？</div>
        <div class="btn-list">
          <div class="btn btn-danger" @click="toCheckResult(false)">审核不通过</div>
          <div class="btn btn-active" @click="toCheckResult(true)">审核通过</div>
        </div>
      </div>
    </div>
    <div class="result-wrap" v-if="showFailDialog">
      <div class="result-body">
        <div class="result-title">审核不通过</div>
        <textarea v-model="dataForm.remark" placeholder="请填写原因"/>
        <div class="btn-list">
          <div class="btn" @click="showFailDialog = false;">取消</div>
          <div class="btn btn-active" @click="toRefund">确定</div>
        </div>
      </div>
    </div>
    <div class="result-wrap" v-if="showPassDialog">
      <div class="result-body">
        <div class="result-title">{{passTip}}</div>
        <textarea v-model="passRemark" placeholder="请填写备注"/>
        <div class="btn-list">
          <div class="btn" @click="showPassDialog = false;">取消</div>
          <div class="btn btn-active" @click="toPass">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import orderStatus from "utils/order-status";

  export default {
    data() {
      return {
        orderInfo: {
          orderGoodsList: [],
          orderServicerList: []
        },
        type: 0,
        logisticsList: [],
        userInfo: {},
        userBuyTimes: 0,
        dataForm: {},
        showFinanceCheck: false,
        showRefund: false,
        showPassDialog: false,
        showFailDialog: false,
        passRemark: '',
        passTip: '',
      };
    },
    computed: {
      isFinanceCheck(){
        const orderInfo = this.orderInfo;
        return (orderInfo.payStatus === 1 && orderInfo.orderStatus > 1 && orderInfo.orderStatus < 8) ||
          (orderInfo.orderStatus === 11 && orderInfo.isDelayShipping === 1)
      }
    },
    components: {},
    methods: {
      async toPass(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/payStatus/update',
          data: {
            orderId: this.id,
            remark: this.passRemark || '',
            status: this.passStatus
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showPassDialog = false;
                this.loadData();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      async toRefund(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/status/cancel',
          data: {
            orderId: this.id,
            remark: this.dataForm.remark || '',
            refundFlag: 0
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          this.showFailDialog = false;
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showFailDialog = false;
                this.loadData();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      toCheckResult(flag){
        this.showFinanceCheck = false;
        if(flag){
          if(this.orderInfo.waitPayAmount === 0 && this.orderInfo.payStatus === 1){
            this.passTip = '确定已收全款';
            this.passStatus = 3;
          }
          if(this.orderInfo.waitPayAmount > 0 && this.orderInfo.payStatus === 1){
            this.passTip = `确定已收定金${this.orderInfo.partOrderAmount}元?`;
            this.passStatus = 2;
          }
          this.showPassDialog = true;
        }else{
          this.showFailDialog = true;
        }
      },
      toCheck(){
        this.showFinanceCheck = true;
      },
      toEdit() {
        wx.navigateTo({
          url: "/pages/add-user/main?id=" + this.id
        });
      },
      changeSwiper(e) {
        this.type = e.mp.detail.current;
      },
      changeType(type) {
        this.type = type;
      },
      async loadData() {
        wx.showLoading();
        const result = await wx.request({
          url: `/bg/order/detail/${this.id}`
        });
        wx.hideLoading();
        if (result.code === 200) {
          if (result.data.orderRefund && result.data.orderRefund.foVerifyStatus == 5) {
            result.data.orderAmount = result.data.orderAmount - result.data.orderRefund.refundAmount;
          }
          if (result.data.partOrderAmount !== 0) {
            result.data.partOrderAmount = parseInt(result.data.partOrderAmount / 100);
          }
          result.data.orderAmount = parseInt(result.data.orderAmount / 100);
          result.data.orderStatusStr = orderStatus(result.data.orderStatus);
          result.data.orderLogList.reverse();
          this.orderInfo = result.data;
          if (this.orderInfo.serviceGoodsId > 0) {
            const refResult = await wx.request({
              url: `/bg/order/detail/${this.orderInfo.relOrderId}`
            });
            if (refResult.code === 200) {
              this.orderInfo.logisticsNo = refResult.data.logisticsNo;
              this.orderInfo.logisticsId = refResult.data.logisticsId;
            }
          }
          if (this.orderInfo.orderLogisticsRecordList.length === 2) {
            this.logisticsList = JSON.parse(this.orderInfo.orderLogisticsRecordList[ 1 ].recordInfo);
          }
        } else {
          wx.showToast(result.message);
        }
        const userResult = await wx.request({
          url: `/bg/userInfo/detail/${this.orderInfo.userInfoId}`
        });
        if (userResult.code === 200) {
          this.userInfo = userResult.data;
        }
        const countResult = await wx.request({
          url: "/bg/order/report/user/repeatBuyTimes",
          data: {
            userId: this.orderInfo.userInfoId
          }
        });
        if (countResult.code === 200) {
          this.userBuyTimes = countResult.data;
        }
      }
    },
    async mounted() {
      this.id = this.$root.$mp.query.id;
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-user-detail {
    .tab-list {
      @include middle-center-x();
      top: 0;
      width: pxToRem(750);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 pxToRem(4) pxToRem(6) 0 rgba(204, 204, 204, 0.5);
      z-index: 1000;
      .tab {
        flex: 1;
        padding-top: pxToRem(22);
        padding-bottom: pxToRem(22);
        color: #707070;
        font-size: pxToRem(32);
        line-height: pxToRem(44);
        text-align: center;
        &.active {
          color: #44BDF5;
        }
      }
    }
    .content-list {
      height: 100vh;
      box-sizing: border-box;
      .content {
        padding-top: pxToRem(88);
        padding-bottom: pxToRem(148);
        height: 100vh;
        background-color: #fff;
        box-sizing: border-box;
      }
    }
    .module-title {
      position: relative;
      display: flex;
      align-items: center;
      padding-top: pxToRem(20);
      padding-left: pxToRem(20);
      padding-bottom: pxToRem(10);
      background-color: #fff;
      .title {
        font-size: pxToRem(36);
        margin-left: pxToRem(10);
        margin-right: pxToRem(10);
      }
      .line {
        width: pxToRem(20);
        height: pxToRem(4);
        background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      }
      .order-status {
        @include middle-center-y();
        right: pxToRem(30);
        font-size: pxToRem(28);
        color: #FF6954;
      }
    }
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(30);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      padding-bottom: pxToRem(20);
      background-color: #fff;
      .title {
        display: flex;
        align-items: center;
        margin-right: pxToRem(10);
        color: #707070;
        img {
          margin-right: pxToRem(5);
          width: pxToRem(28);
        }
        &.block {
          margin-bottom: pxToRem(10);
          width: 100%;
        }
      }
      .value {
        color: #000;
        margin-right: pxToRem(30);
      }
    }
  }

  .info-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: pxToRem(30);
    padding-left: pxToRem(30);
    padding-right: pxToRem(30);
    &.border {
      border-bottom: pxToRem(1) solid $main-color;
    }
    &:last-child {
      border-bottom: none;
    }
    .info {
      width: pxToRem(345);
      padding-left: 0;
      &.block {
        width: pxToRem(690);
      }
      .main-title {
        padding-bottom: pxToRem(10);
        width: pxToRem(690);
      }
    }
  }

  .order-wrap {
    margin-bottom: pxToRem(20);
    background-color: #fff;
    padding-left: pxToRem(30);
    padding-right: pxToRem(30);
    .order-no {
      position: relative;
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(20);
      border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
      font-size: pxToRem(26);
      color: #707070;
      background-color: #fff;
      .order-status {
        position: absolute;
        right: 0;
        top: pxToRem(30);
        color: #FF6550;
      }
    }
    .goods-name {
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(20);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      @include multi-ellipsis();
    }
  }

  .info-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .info {
      width: pxToRem(345);
      padding-left: 0;
      &.block {
        width: pxToRem(690);
      }
    }
  }

  .line {
    height: pxToRem(20);
    background-color: #F5F5F5;
  }

  .btn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include middle-center-x();
    bottom: 0;
    width: pxToRem(750);
    padding: pxToRem(20) pxToRem(50);
    background-color: #fff;
    .btn {
      flex: 1;
      color: #44BDF5;
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      border: pxToRem(1) solid #44BDF5;
      border-radius: pxToRem(8);
    }
    .btn-active {
      color: #fff;
      border: none;
      background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
    }
  }

  .logistics-list {
    padding-top: pxToRem(30);
    padding-left: pxToRem(30);
    padding-right: pxToRem(30);
    border-top: pxToRem(1) solid rgba(68, 189, 245, 0.3);;
    .logistics {
      position: relative;
      padding-left: pxToRem(40);
      margin-bottom: pxToRem(20);
      .point {
        position: absolute;
        left: 0;
        top: pxToRem(10);
        width: pxToRem(22);
        height: pxToRem(20);
      }
      .point-line {
        position: absolute;
        left: pxToRem(11);
        top: pxToRem(42);
        bottom: 0;
        width: pxToRem(1);
        background: #CCCCCC;
      }
      .logistics-content {
        font-size: pxToRem(28);
        line-height: pxToRem(40);
      }
      .logistics-time {
        padding-top: pxToRem(10);
        font-size: pxToRem(24);
        color: #9B9B9B;
      }
      &:first-child {
        .point-line {
          background: linear-gradient(360deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
        }
      }
    }
  }
  .result-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    .result-body {
      @include middle-center();
      width: pxToRem(670);
      background-color: #fff;
      padding-top: pxToRem(30);
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .result-title {
        padding: pxToRem(30);
        font-size: pxToRem(40);
        color: #4A4A4A;
        text-align: center;
      }
      textarea {
        display: block;
        width: 100%;
        padding: pxToRem(20);
        height: pxToRem(140);
        line-height: 1.4;
        font-size: pxToRem(28);
        border: pxToRem(1) solid #44BDF5;
        border-radius: pxToRem(10);
        box-sizing: border-box;
      }
      .radio-group, input {
        padding-left: pxToRem(200);
      }
      .btn-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: pxToRem(30);
        padding: pxToRem(30) pxToRem(10);
        background-color: #fff;
        .btn {
          width: pxToRem(260);
          height: pxToRem(88);
          line-height: pxToRem(88);
          text-align: center;
          font-size: pxToRem(36);
          border: pxToRem(1) solid #9B9B9B;
          color: #9B9B9B;
          border-radius: pxToRem(8);
        }
        .btn-danger {
          color: #FF6752;
          border-color: #FF6752;
        }
        .btn-active {
          background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
          color: #fff;
          border: none;
        }
      }
    }
  }
</style>
